<template>
  <div class="tabBar">
    <div class="tabBar_con">
      <div :class="{'bar':true,'select':selectIndex == index}"
           v-for="(item,index) in items"
           :key="index"
           @click="changeBar(index)">
        <i :class="item.iconName"></i>
        <div>{{item.title}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "TabBar",
  computed: {
    selectIndex: function () {
      return this.$store.state.tabBar.selectIndex;
    }
  },
  methods: {
    changeBar (index) {
      // console.log(this.$store)
      // this.$store.commit('changeTabIndex',index)
      // 进行编程式导航
      this.$router.replace(this.items[index].to)
    }
  },
  props: ["items"]
}
</script>

<style lang="less">
.tabBar {
  height: 44px;
  .tabBar_con {
    width: 100%;
    height: 44px;
    background-color: white;
    border-top: 1px solid #cccccc;
    padding: 5px 0;
    box-sizing: border-box;
    display: flex;
    justify-content: space-around;
    align-items: center;

    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 90;
  }
  .bar {
    text-align: center;
    .iconfont {
      font-size: 20px;
      color: #666666;
    }
    div {
      font-size: 14px;
      color: #666666;
    }
  }
  .select {
    .iconfont {
      color: royalblue;
    }
  }
}
</style>